<script setup type="ts">
import { ref, watch, computed } from 'vue'
import nodeConfigPanel from './components/node-config-panel.vue'
import globalConfigPanel from './components/global-config-panel.vue'
import { useGraphStore } from '@/store/modules/graphStore'
const graphStore = useGraphStore()
const isShowNodeConfigPanel = ref(false)
const activeTab = ref('global')
const selectNodeId = computed(() => {
  return graphStore.graph.selectNode ? graphStore.graph.selectNode.id : null
})
watch(selectNodeId, (val) => {
  if (val) {
    isShowNodeConfigPanel.value = true
    activeTab.value = 'node'
  } else {
    isShowNodeConfigPanel.value = false
    activeTab.value = 'global'
  }
})
</script>

<template>
  <div
    class="graph-right-panel bg-white w-full flex flex-col h-full relative"
  >
    <div class="w-full p-4">
      <a-radio-group
        type="button"
        v-model="activeTab"
        size="small"
        class="w-[100%] flex items-center justify-center text-center"
      >
        <a-radio value="global" class="flex-1">全局配置</a-radio>
        <a-radio value="node" class="flex-1" v-if="isShowNodeConfigPanel"
          >组件配置</a-radio
        >
      </a-radio-group>
    </div>
    <div
      class="overflow-y-auto flex-1 relative bg-white"
      style="max-height: calc(100vh - 101px)"
    >
      <globalConfigPanel v-if="activeTab === 'global'"></globalConfigPanel>
      <nodeConfigPanel
        v-if="activeTab === 'node' && isShowNodeConfigPanel"
      ></nodeConfigPanel>
    </div>
  </div>
</template>
